<template>
  <view class="container">
    <!-- 头部 -->
    <view class="header">
      <view class="header-bg">
        <view class="header-content">
          <text class="title">🌟 星座运势查询 🌟</text>
          <text class="subtitle">输入您的姓名和生日，查看今日运势</text>
        </view>
      </view>
    </view>

    <!-- 表单卡片 -->
    <view class="card form-card">
      <view class="card-title">个人信息</view>
      
      <view class="form-item">
        <text class="label">姓名</text>
        <input 
          v-model="form.name" 
          placeholder="请输入您的姓名"
          class="input"
          placeholder-class="input-placeholder"
        />
      </view>
      
      <view class="form-item">
        <text class="label">生日</text>
        <picker 
          mode="date" 
          v-model="form.birthday"
          @change="onDateChange"
          class="picker"
        >
          <view class="picker-text" :class="{ 'placeholder': !form.birthday }">
            {{ form.birthday || '请选择您的生日' }}
          </view>
        </picker>
      </view>
      
      <button 
        class="btn-submit"
        :class="{ 'loading': loading }"
        @click="submitForm"
        :loading="loading"
      >
        {{ loading ? '正在计算中...' : '查看我的运势' }}
      </button>
    </view>

    <!-- 结果卡片 -->
    <view v-if="result.greeting" class="card result-card">
      <view class="result-content">
        <view class="zodiac-section">
          <view class="zodiac-name">{{ result.zodiacSign }}</view>
          <view class="zodiac-icon">{{ getZodiacIcon(result.zodiacSign) }}</view>
        </view>
        
        <view class="greeting-section">
          <view class="greeting-text">{{ result.greeting }}</view>
        </view>
        
        <view class="fortune-section">
          <view class="fortune-title">详细运势</view>
          <view class="fortune-text">{{ result.fortune }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      form: {
        name: '',
        birthday: ''
      },
      result: {
        greeting: '',
        zodiacSign: '',
        fortune: ''
      },
      zodiacIcons: {
        '白羊座': '♈',
        '金牛座': '♉',
        '双子座': '♊',
        '巨蟹座': '♋',
        '狮子座': '♌',
        '处女座': '♍',
        '天秤座': '♎',
        '天蝎座': '♏',
        '射手座': '♐',
        '摩羯座': '♑',
        '水瓶座': '♒',
        '双鱼座': '♓'
      }
    }
  },
  
  methods: {
    onDateChange(e) {
      this.form.birthday = e.detail.value
    },
    
    getZodiacIcon(sign) {
      return this.zodiacIcons[sign] || '⭐'
    },
    
    // 本地星座计算（避免网络请求）
    getZodiacSign(birthday) {
      const date = new Date(birthday)
      const month = date.getMonth() + 1
      const day = date.getDate()
      const monthDay = `${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`
      
      const zodiacSigns = {
        '白羊座': { start: '03-21', end: '04-19' },
        '金牛座': { start: '04-20', end: '05-20' },
        '双子座': { start: '05-21', end: '06-21' },
        '巨蟹座': { start: '06-22', end: '07-22' },
        '狮子座': { start: '07-23', end: '08-22' },
        '处女座': { start: '08-23', end: '09-22' },
        '天秤座': { start: '09-23', end: '10-23' },
        '天蝎座': { start: '10-24', end: '11-22' },
        '射手座': { start: '11-23', end: '12-21' },
        '摩羯座': { start: '12-22', end: '12-31' },
        '水瓶座': { start: '01-20', end: '02-18' },
        '双鱼座': { start: '02-19', end: '03-20' }
      }
      
      for (const [sign, period] of Object.entries(zodiacSigns)) {
        if (sign === '摩羯座') {
          if (monthDay >= '12-22' || monthDay <= '01-19') {
            return sign
          }
        } else if (sign === '水瓶座') {
          if (monthDay >= '01-20' && monthDay <= '02-18') {
            return sign
          }
        } else {
          if (monthDay >= period.start && monthDay <= period.end) {
            return sign
          }
        }
      }
      return '未知星座'
    },
    
    getRandomFortune(zodiacSign) {
      const fortuneMessages = {
        '白羊座': [
          '今天是充满活力的一天，适合开始新项目！',
          '你的热情会感染身边的人，保持积极态度。',
          '今天可能会遇到一些挑战，但你的勇气会帮助你克服。'
        ],
        '金牛座': [
          '今天适合稳步前进，不要急于求成。',
          '财运不错，但要谨慎投资。',
          '享受生活中的美好事物，放慢脚步。'
        ],
        '双子座': [
          '今天的沟通运势很好，适合社交活动。',
          '保持好奇心，可能会学到新知识。',
          '变化带来新机遇，拥抱不确定性。'
        ],
        '巨蟹座': [
          '今天适合关注家庭和内心感受。',
          '直觉敏锐，相信自己的第六感。',
          '情感丰富的一天，多与亲友交流。'
        ],
        '狮子座': [
          '今天是展现才华的好时机！',
          '自信心爆棚，但要避免过于骄傲。',
          '领导力得到认可，适合承担重要任务。'
        ],
        '处女座': [
          '今天适合整理和规划，注重细节。',
          '工作效率很高，但不要过于追求完美。',
          '健康运势不错，保持良好作息。'
        ],
        '天秤座': [
          '今天人际关系和谐，适合合作。',
          '美感敏锐，可以尝试艺术创作。',
          '平衡各方面需求，避免过度纠结。'
        ],
        '天蝎座': [
          '今天直觉力强，适合深入思考。',
          '神秘的事物吸引你，保持探索精神。',
          '情感深刻，但要控制占有欲。'
        ],
        '射手座': [
          '今天适合外出旅行或学习新事物。',
          '乐观的态度会带来好运。',
          '自由自在的一天，不要被束缚。'
        ],
        '摩羯座': [
          '今天适合制定长远计划。',
          '努力工作会有回报，坚持就是胜利。',
          '责任感强，但也要注意休息。'
        ],
        '水瓶座': [
          '今天充满创新思维，适合头脑风暴。',
          '独特的想法会得到认可。',
          '朋友运势佳，可能结识志同道合的人。'
        ],
        '双鱼座': [
          '今天想象力丰富，适合艺术创作。',
          '同情心强，可能会帮助他人。',
          '梦境可能有特殊含义，留意潜意识信息。'
        ]
      }
      
      const messages = fortuneMessages[zodiacSign]
      if (messages && messages.length > 0) {
        const randomIndex = Math.floor(Math.random() * messages.length)
        return messages[randomIndex]
      }
      return '今天是美好的一天！'
    },
    
    submitForm() {
      if (!this.form.name.trim()) {
        uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        })
        return
      }
      
      if (!this.form.birthday) {
        uni.showToast({
          title: '请选择生日',
          icon: 'none'
        })
        return
      }
      
      this.loading = true
      
      // 模拟网络请求延迟
      setTimeout(() => {
        try {
          const zodiacSign = this.getZodiacSign(this.form.birthday)
          const fortune = this.getRandomFortune(zodiacSign)
          const greeting = `您好 ${this.form.name}，您的星座是${zodiacSign}，今天的运势：${fortune}`
          
          this.result = {
            greeting,
            zodiacSign,
            fortune
          }
          
          uni.showToast({
            title: '运势查询成功！',
            icon: 'success'
          })
          
        } catch (error) {
          console.error('查询错误:', error)
          uni.showToast({
            title: '查询失败，请重试',
            icon: 'none'
          })
        } finally {
          this.loading = false
        }
      }, 1000)
    }
  }
}
</script>

<style>
.container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 0;
}

.header {
  padding: 60rpx 40rpx 40rpx;
}

.header-content {
  text-align: center;
  color: white;
}

.title {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  text-shadow: 2rpx 2rpx 8rpx rgba(0,0,0,0.3);
}

.subtitle {
  display: block;
  font-size: 28rpx;
  opacity: 0.9;
}

.form-card {
  margin: 0 30rpx 30rpx;
}

.card-title {
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 40rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.label {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.input {
  width: 100%;
  height: 80rpx;
  padding: 0 20rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.input-placeholder {
  color: #999;
}

.picker {
  width: 100%;
}

.picker-text {
  height: 80rpx;
  line-height: 80rpx;
  padding: 0 20rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 20rpx;
  font-size: 28rpx;
  background: white;
}

.picker-text.placeholder {
  color: #999;
}

.btn-submit {
  width: 100%;
  height: 80rpx;
  background: linear-gradient(45deg, #667eea, #764ba2);
  border: none;
  border-radius: 40rpx;
  color: white;
  font-size: 32rpx;
  font-weight: bold;
  margin-top: 20rpx;
}

.btn-submit.loading {
  opacity: 0.7;
}

.result-card {
  margin: 0 30rpx;
  background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
  color: white;
}

.result-content {
  text-align: center;
}

.zodiac-section {
  margin-bottom: 40rpx;
}

.zodiac-name {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.zodiac-icon {
  font-size: 120rpx;
  margin-bottom: 20rpx;
}

.greeting-section {
  margin-bottom: 40rpx;
}

.greeting-text {
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  padding: 20rpx;
  border-radius: 20rpx;
  font-size: 28rpx;
  font-weight: bold;
  line-height: 1.5;
}

.fortune-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.fortune-text {
  background: rgba(255, 255, 255, 0.1);
  padding: 30rpx;
  border-radius: 20rpx;
  font-size: 28rpx;
  line-height: 1.6;
}
</style> 